<template>
  <div class="all">
    <div class="loginHeader">
      <van-icon name="cross" color="#FFD103" size="25" />
      <span class="help">帮助</span>
    </div>
    <div class="loginText">欢迎登录美团</div>
    <div class="loginContent">
      <van-form @submit="onSubmit" v-if="type === 'login'">
        <van-cell-group inset>
          <van-field
            class="loginUsername"
            v-model="username"
            name="username"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请输入手机号' }]"
          />
          <van-field
            class="loginPassword"
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            class="loginButton"
            round
            block
            type="primary"
            native-type="submit"
          >
            登录
          </van-button>
        </div>
        <span class="register" @click="changeType('register')">注册账号</span>
      </van-form>
      <van-form @submit="onSubmit" v-else>
        <van-cell-group inset>
          <van-field
            v-model="name"
            name="name"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            class="loginUsername"
            v-model="username"
            name="username"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请输入手机号' }]"
          />
          <van-field
            class="loginPassword"
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button
            class="loginButton"
            round
            block
            type="primary"
            native-type="submit"
          >
            注册
          </van-button>
        </div>
        <span class="login" @click="changeType('login')">已有帐号</span>
      </van-form>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { useStore } from 'vuex'
import { reqLogin, reqRegister } from "../api";
export default {
  setup() {
    const state = reactive({
      type: "login",
      username: "Vue-meituan",
      password: "123456",
      name: "",
    });
    const store = useStore()
    const router = useRouter();
    const changeType = (value) => {
      state.type = value;
    };
    const onSubmit = async (values) => {
      if (state.type === "login") {
        reqLogin(values.username, values.password)
          .then((res) => {
            if (res.code === 200) {
              Toast.success("登录成功");
              store.state.user = res.data
              router.push("/home");
            } else {
              Toast.fail("账号或密码错误");
            }
          })
          .catch((err) => {
            Toast.fail(err)
          });
      } else {
          reqRegister(values.username, values.password, values.name)
          .then((res) => {
            if (res.code === 200) {
              Toast.success(res.mess);
              state.type = "login";
            } else {
              Toast.fail(res.mess);
            }
          })
          .catch((err) => {
            Toast.fail(err)
          });
      }
    };
    return {
      ...toRefs(state),
      changeType,
      onSubmit,
    };
  },
};
</script>

<style lang="less" scoped>
* {
  background-color: #fdfffd;
}
.all {
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .loginHeader {
  margin-top: 10px;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .help {
    font-size: 21px;
  }
}
.loginText {
  display: flex;
  font-size: 28px;
  padding-left: 30px;
  padding-top: 100px;
}
.loginContent {
  margin-top: 50px;
  .loginUsername {
    margin-top: 30px;
  }
  .loginPassword {
    margin-top: 30px;
  }
  .loginButton {
    margin-top: 50px;
    background-color: #fdbf31;
    border: none;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
  .login,
  .register {
    display: block;
    color: #ffdf95;
    margin-top: 40px;
    text-align: center;
  }
}
}
</style>
